Nuxt 3のAuto-imports機能に関する所感

#Nuxt_3 #Nuxt.js #Vue.js

はじめに

Nuxt 3にはAuto-importsという機能があります

この仕組みを使っていて思ったことについてまとめてみます

仕組みについて

Nuxt 3では以下のいずかのディレクトリにあるモジュールからexportされているAPIをimport文を書かずに自動で利用することができます。

components/

composables/

utils/

例えば、composables/useCounter.tsというファイルがあったとします

code:composables/useCounter.ts

export function useCounter() {

const count = ref(0);

const increment = () => {

count.value++;

};

const decrement = () => {

count.value--;

};

return { count, increment, decrement };

}

この場合、アプリケーションではimportを書かずにこのuseCounter()を利用することができます

code:components/Counter.vue

const { count, increment, decrement } = useCounter();

</script>

個人的意見

この仕組みは記述量を減らすことができ、一見、とても便利な仕組みのように見えます

しかし、個人的にはこの仕組みは乱用をすると危険な仕組みなのではないかと思っています

たしかにこの仕組みには、記述量を減らし開発スピードを改善する効果が期待できると思います

しかし、この仕組みにはES Modulesの仕組みによってもたらされるメリットが損なわれてしまうというデメリットが考えられます

具体的には以下のような点です

1. あるモジュールがどのモジュールに依存しているかが不明瞭になってしまうこと

例えば、以下のファイルはimportがあることによりutils/fooとutils/barに依存していることがすぐにわかります

code:javascript

import { foo } from '@/utils/foo';

import { bar } from '@/utils/bar';

2. ESLintのno-restricted-importsルールやeslint-plugin-boundariesなどによる制限を容易にすり抜けてしまうこと

ESLintのこれらの仕組みを使うことで、あるディレクトリで提供されるモジュールに関する読み込みなどを制限することができます

具体的には、./domainディレクトリからは./infrastructureディレクトリのモジュールへのimportを禁止する、といったことなどができます

Auto-importsの仕組みはこういった制限を掛けることが難しく、また、容易に制限をすり抜けてしまうことも考えられます

3. composables/やutils/で公開されている各API(関数, クラス, 変数など)が、実質的にグローバル変数またはグローバル関数として扱われてしまうこと

4. Auto-importsに依存しているモジュールに対してユニットテストを書きたい場合にReferenceErrorが発生してしまうこと

ただし、この問題については@nuxt/test-utilsを使えば、回避は可能だと思います

components/**/*.vueからcomposables/**/*.tsをimportなしで読み込めるようにすることはまだよいかもしれませんが、components/**/*.vueからutils/内のありとあらゆるモジュールをimportなしで読み込めてしまうのは、控えめに使用しないと設計が破綻してしまうリスクもあるのではないかと思います

そもそも、LSPを使えばimport文の自動挿入を行うこともできるため、実はそこまで恩恵がない可能性もあるのではないかと思います

そのため、Auto-importsによるimport文の省略というのは、メリットよりもデメリットの方が大きいのではないかと個人的には思いました

utils/に配置したあらゆるモジュールはimportをせずに利用できてしまうので、あまり乱用はしすぎず、適宜、その他のディレクトリを設けてモジュールを配置するようにした方が安全なのではないかと思いました

おわりに

やや批判的な内容にはなってしまいましたが、Nuxt 3は様々な機能や有益な仕組みが提供される優れたフレームワークです

Auto-importsの仕組みは便利な機能であることは間違いないと思うものの、その分、乱用することによってリスクが生じる可能性もあると思います

控えめに使う分には便利な仕組みだと思うので、乱用しすぎないようにするのが良いのではないかと思います

また、このページで紹介した懸念については、あくまでNuxt 3を使ってバックエンドまで含めてフルスタックにアプリケーションを開発する場合に生じる可能性があるもので、BFFとしての利用や小規模なアプリであればそこまで問題はないと思います